<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/bootstrap.css">
	<script src="js/jquery-slim.min.js"></script>
	<script src="js/popper.min.js"></script>
	<script src="js/bootstrap.js"></script>
	<title>test3</title>
	<style>
		.myborder{
			border: 3px solid purple;
		}
	</style>
</head>
<body>

<div class="container">
	d-md-none 隐藏 <br>
	d-lg-block 显示 <br>
	<div class="row  bg-success border border-dark mx-0">
		<h1 class="col-sm-12 col-md-4">LOGO</h1>
		<div class="col-sm-12 col-md-4 offset-md-4 mt-2">
			<input class="form-control " type="text">
		</div>
	</div>
	<div class="  border border-dark">
		<h1>
			Bootstrap
			<span class="font-weight-normal font-italic">css</span>
			<span class="font-weight-normal">Type</span>
			
		</h1>
	</div>
	<div class="row  mx-0">
		<div class="col-md-3 col-sm-12 col-lg-2 border border-dark">
			<ul class="list-unstyled">
				<li class="myborder"><a href="">豆蔻年华</a></li>
				<li class="myborder"><a href="">花样直播</a></li>
				<li class="myborder"><a href="">而立之年</a></li>
				<li class="myborder"><a href="">激情岁月</a></li>
			</ul>
		</div>
		<div class="col-lg-8 col-md-9 col-sm-12 border border-dark ">
			<div class="row no-gutters border border-dark">
				<img src="img/1.jpg" class="p-1 col-md-3 col-sm-6 img-fluid">
				<img src="img/2.jpg" class="p-1 col-md-3 col-sm-6 img-fluid">
				<img src="img/3.jpg" class="p-1 col-md-3 col-sm-6 img-fluid">
				<img src="img/4.jpg" class="p-1 col-md-3 col-sm-6 img-fluid">
			</div>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores cumque dolores, error est facere id ipsa iure libero necessitatibus neque nesciunt nostrum omnis quos ratione recusandae rem, suscipit vero voluptatem?
		</div>
		<div class="col-lg-2 col-sm-12 d-md-none d-lg-block border border-dark ">
			右边Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur facilis in inventore magnam nesciunt omnis provident qui quidem, recusandae! Alias assumenda cum error impedit maiores natus necessitatibus obcaecati quidem voluptas!
		</div>
	</div>
</div>

</body>
</html>